<div [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="22">
        {{ 'datadev.choseDataSourceType' | translate }}
      </d-col>
      <d-col [dSpan]="2" style="text-align: right">
        <d-button
          icon="icon-close"
          bsStyle="text-dark"
          title="{{ 'app.common.operate.close.label' | translate }}"
          (btnClick)="data.onClose()"
        ></d-button>
      </d-col>
    </d-row>
  </div>
  <div class="modal-body" style="padding: 0px 48px 48px 48px">
    <h3>{{ 'datadev.rdbms' | translate }}</h3>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('Mysql')">
          <div class="indicator-card-content">Mysql</div>
        </d-card>
      </d-col>
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('Oracle')">
          <div class="indicator-card-content">Oracle</div>
        </d-card>
      </d-col>
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('PostGreSQL')">
          <div class="indicator-card-content">PostGreSQL</div>
        </d-card>
      </d-col>
    </d-row>
    <h3>{{ 'datadev.bigdata' | translate }}</h3>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('Druid')">
          <div class="indicator-card-content">Druid</div>
        </d-card>
      </d-col>
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('Doris')">
          <div class="indicator-card-content">Doris</div>
        </d-card>
      </d-col>
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('ClickHouse')">
          <div class="indicator-card-content">ClickHouse</div>
        </d-card>
      </d-col>
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('hive')">
          <div class="indicator-card-content">Hive</div>
        </d-card>
      </d-col>
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('hbase')">
          <div class="indicator-card-content">Hbase</div>
        </d-card>
      </d-col>
    </d-row>
    <h3>{{ 'datadev.mq' | translate }}</h3>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('Kafka')">
          <div class="indicator-card-content">Kafka</div>
        </d-card>
      </d-col>
    </d-row>
    <h3>{{ 'datadev.other' | translate }}</h3>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('Elasticsearch')">
          <div class="indicator-card-content">Elasticsearch</div>
        </d-card>
      </d-col>
      <d-col [dSpan]="6">
        <d-card (click)="openAddDataSourceDialog('JDBC')">
          <div class="indicator-card-content">JDBC</div>
        </d-card>
      </d-col>
    </d-row>
  </div>
</div>
